import { ElButton } from 'element-plus'
import { VabIcon } from 'vsv-icon'
import { Menu } from '/@/api/auth/menu'
import { ShowEditDialog } from './components/Edit.vue'
import { EditDialogType } from '/@/components/QsEditDialog'

export function numberConvertToUppercase(num: number | undefined) {
  num = Number(num)
  const upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿']
  const length = String(num).length
  if (length == 1) {
    return upperCaseNumber[num]
  } else if (length == 2) {
    if (num == 10) {
      return upperCaseNumber[num]
    } else if (num > 10 && num < 20) {
      return `十${upperCaseNumber[String(num).charAt(1) as unknown as number]}`
    } else {
      return `${upperCaseNumber[String(num).charAt(0) as unknown as number]}十${upperCaseNumber[
        String(num).charAt(1) as unknown as number
      ].replace('零', '')}`
    }
  }
}

export const columns: Columns<
  Menu,
  {
    delete: (id: number) => Promise<void>
    'show-edit': ShowEditDialog
    'show-sub-level': ShowEditDialog
  }
> = [
  {
    title: '类型',
    key: 'type',
    width: 150,
    customRender: ({ row }) => {
      return <span>{row.type == 1 ? `${numberConvertToUppercase(row.level)}级菜单` : '权限'}</span>
    },
  },
  {
    title: '标题',
    key: 'meta.title',
  },
  {
    title: '名称',
    key: 'name',
  },
  {
    title: '路径',
    key: 'path',
  },
  {
    width: 300,
    title: 'vue组件',
    key: 'component',
  },
  {
    title: '图标',
    key: 'meta.icon',
    customRender: ({ row }) => {
      return <>{row.meta.icon && <VabIcon icon={row.meta.icon} />}</>
    },
  },
  {
    title: '权限点',
    key: 'permission',
    width: 200,
    customRender: ({ row }) => {
      return <span>{row.permission}</span>
    },
  },
  {
    width: 300,
    fixed: 'right',
    title: '操作',
    key: 'action',
    customRender: ({ row }, emit) => {
      return (
        <>
          {row.type != 2 && (
            <ElButton
              onClick={() =>
                emit('show-edit', {
                  type: EditDialogType.SUBLEVEL,
                  data: row,
                })
              }
              link
              type='primary'
            >
              添加子级
            </ElButton>
          )}
          {row.type != 2 && (
            <ElButton
              onClick={() =>
                emit('show-sub-level', {
                  type: EditDialogType.SUBLEVEL,
                  data: row,
                })
              }
              link
              type='primary'
            >
              添加权限
            </ElButton>
          )}
          <ElButton
            link
            type='primary'
            onClick={() => {
              if (row.type == 2) {
                emit('show-sub-level', {
                  type: EditDialogType.EDIT,
                  data: row,
                })
              } else {
                emit('show-edit', {
                  type: EditDialogType.EDIT,
                  data: row,
                })
              }
            }}
          >
            编辑
          </ElButton>
          <ElButton type='danger' link onClick={() => emit('delete', row.id)}>
            删除
          </ElButton>
        </>
      )
    },
  },
]
